import {
  pubGraphic,
  pubGrid,
  pubXAxis,
  pubYAxis,
  pubLegend,
  pubBackground,
  pubLabel,
  pubDataZoom,
} from './chartTemplate';
import { pickBy, cloneDeep } from 'lodash';
import { colorSchemes } from './chartColors';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import { ref, watch } from 'vue';

const storeSystem = useSystemStore();
const { themeConfig } = storeToRefs(storeSystem);
// 配色方案
let colors = ref<string[]>([]);
watch(
  () => themeConfig.value.themeColor,
  newVal => {
    //@ts-ignore
    colorSchemes[newVal] && (colors.value = colorSchemes[newVal]);
  },
  { immediate: true },
);
// 所有用到的 echarts option 都在这里进行配置
export const chartParams = {
  // 柱状图
  column: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'bar',
        label: Object.assign(pubLabel, config.series.label),
        barMaxWidth: 35,
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  columnDiff: (config: any, data: any, dimensions: string[]) => {
    const option = {
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: [
        {
          type: 'bar',
          barMaxWidth: 35,
          itemStyle: {
            color: function (params: any) {
              return colors.value[params.dataIndex];
            },
          },
        },
      ],
    };
    return option;
  },
  columnStack: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'bar',
        label: Object.assign(pubLabel, config.series.label),
        stack: 'A',
        barMaxWidth: 35,
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  columnPictorial: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: [
        {
          type: 'pictorialBar',
          barCategoryGap: '40%',
          barMaxWidth: 80,
          symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
          itemStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 1,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: colors.value[0],
                  // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: colors.value[1], // 50% 处的颜色
                },
                {
                  offset: 0.5,
                  color: colors.value[2], // 50% 处的颜色
                },
                {
                  offset: 1,
                  color: colors.value[3], // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
          label: Object.assign(pubLabel, config.series.label),
        },
      ],
    };
    return option;
  },
  cylinder: (config: any, data: any, dimensions: string[]) => {
    const option = {
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: {
        type: 'pictorialBar',
        barMaxWidth: 35,
        symbolRepeat: true,
        symbolMargin: -1,
        symbol:
          'path://M778.24 238.1824v619.52c-7.9872 61.44-136.6016 109.3632-294.2976 109.3632s-286.72-48.5376-294.2976-109.3632V238.1824C188.416 174.4896 320.512 122.88 483.5328 122.88S778.24 174.4896 778.24 238.1824z',
      },
    };
    return option;
  },
  // 折线图
  line: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'line',
        smooth: config.series.smooth,
        label: Object.assign(pubLabel, config.series.label),
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  areaLine: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'line',
        label: Object.assign(pubLabel, config.series.label),
        smooth: config.series.smooth,
        areaStyle: {
          opacity: 0.3,
        },
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  // 条形图
  bar: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'bar',
        label: Object.assign(pubLabel, config.series.label),
        barMaxWidth: 35,
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(cloneDeep(pubDataZoom), config.dataZoom, {
        yAxisIndex: [0, 1],
      }),
      yAxis: Object.assign(pubXAxis, config.xAxis),
      xAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  barSymmetric: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      // grid: [Object.assign(omit(cloneDeep(pubGrid(config.legend.position)),["right"]),{width:'45%'}),Object.assign(omit(cloneDeep(pubGrid(config.legend.position)),["left"]),{width:'45%'})],
      grid: [
        {
          bottom: '10%',
          containLabel: true,
          left: '5%',
          // right: "5%",
          top: '5%',
          width: '45%',
        },
        {
          bottom: '10%',
          containLabel: true,
          // left: "5%",
          right: '5%',
          top: '5%',
          width: '45%',
        },
      ],
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(cloneDeep(pubDataZoom), config.dataZoom, {
        yAxisIndex: [0, 1],
      }),
      // yAxis: [Object.assign(cloneDeep(pubXAxis), config.xAxis,{position:'left'}),Object.assign(cloneDeep(pubXAxis), config.xAxis,{gridIndex: 1,position:'right'})],
      yAxis: [
        {
          position: 'left',
          type: 'category',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
        },
        {
          position: 'right',
          type: 'category',
          gridIndex: 1,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
        },
      ],
      // xAxis:[Object.assign(cloneDeep(pubYAxis), pickBy(config.yAxis, (value) => value !== ''),{inverse: true}),Object.assign(cloneDeep(pubYAxis), pickBy(config.yAxis, (value) => value !== ''),{gridIndex: 1})],
      xAxis: [
        {
          type: 'value',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          splitLine: {
            show: true,
          },
        },
      ],
      series: [
        {
          type: 'bar',
          barMaxWidth: 35,
          showBackground: true,
          label: Object.assign(pubLabel, config.series.label),
          itemStyle: {
            color: function (params: any) {
              return colors.value[params.dataIndex];
            },
          },
        },
        {
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          barMaxWidth: 35,
          showBackground: true,
          label: Object.assign(pubLabel, config.series.label),
          itemStyle: {
            color: function (params: any) {
              return colors.value[params.dataIndex];
            },
          },
        },
      ],
    };
    return option;
  },
  // 散点图
  scatter: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map(() => {
      seriesData.push({
        type: 'scatter',
        label: Object.assign(pubLabel, config.series.label),
        symbolSize: (value: any, params: any) => {
          return value[params.seriesName] / 5;
        },
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  // 漏斗图
  funnel: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      series: [
        {
          type: 'funnel',
          width: '80%',
          label: {
            show: config.series.label.show,
            position: 'inside',
            formatter: (params: any) => {
              return `${params.name} ${
                config.series.label.style.number
                  ? params.value[dimensions[1]]
                  : ''
              } ${
                config.series.label.style.percent ? params.percent + '%' : ''
              }`;
            },
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid',
            },
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
        },
      ],
    };
    return option;
  },
  // 混合图
  mixin: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(pubXAxis, config.xAxis),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: [
        {
          type: 'bar',
          label: Object.assign(pubLabel, config.series.label),
          barMaxWidth: 35,
        },
        {
          type: 'line',
          smooth: config.series.smooth,
          label: Object.assign(pubLabel, config.series.label),
        },
      ],
    };
    return option;
  },
  // 饼图
  pie: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      series: [
        {
          type: 'pie',
          radius: ['0%', '65%'],
          avoidLabelOverlap: false,
          label: {
            fontSize: 14,
            lineHeight: 20,
            show: config.series.label.show,
            formatter: (params: any) => {
              return `${params.name} ${
                config.series.label.style.number
                  ? params.value[dimensions[1]]
                  : ''
              }\n${
                config.series.label.style.percent ? params.percent + '%' : ''
              }`;
            },
          },
          emphasis: {
            label: {
              show: config.series.label.show,
              fontSize: 16,
            },
          },
          labelLine: {
            show: true,
          },
        },
      ],
    };
    return option;
  },
  annular: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      series: [
        {
          type: 'pie',
          radius: ['38%', '65%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          label: {
            show: config.series.label.show,
            fontSize: 14,
            lineHeight: 20,
            formatter: (params: any) => {
              return `${params.name} ${
                config.series.label.style.number
                  ? params.value[dimensions[1]]
                  : ''
              }\n${
                config.series.label.style.percent ? params.percent + '%' : ''
              }`;
            },
          },
          emphasis: {
            label: {
              show: config.series.label.show,
              fontSize: 16,
            },
          },
          labelLine: {
            show: true,
          },
        },
      ],
    };
    return option;
  },
  rose: (config: any, data: any, dimensions: string[]) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      graphic: pubGraphic(data),
      series: [
        {
          type: 'pie',
          radius: ['0%', '65%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          roseType: true,
          label: {
            show: config.series.label.show,
            fontSize: 14,
            lineHeight: 20,
            formatter: (params: any) => {
              return `${params.name} ${
                config.series.label.style.number
                  ? params.value[dimensions[1]]
                  : ''
              }\n${
                config.series.label.style.percent ? params.percent + '%' : ''
              }`;
            },
          },
          emphasis: {
            label: {
              show: config.series.label.show,
              fontSize: 16,
            },
          },
          labelLine: {
            show: true,
          },
        },
      ],
    };
    return option;
  },
  sector: (config: any, data: any, dimensions: string[]) => {
    let serData: any = [];
    let legendData: any = [];
    let dataSum = 0;
    data?.map((res: any) => {
      serData.push({
        name: res.product,
        value: Object.values(res)[0],
      });
      dataSum += Object.values(res)[0] as number;
      legendData.push(res.product);
    });
    serData.push({
      value: dataSum,
      tooltip: {
        show: false,
      },
      label: {
        show: false,
      },
      itemStyle: {
        color: 'transparent',
      },
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: Object.assign(cloneDeep(pubLegend(config.legend)), {
        data: legendData,
      }),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      // dataset: {
      //   dimensions: dimensions,
      //   source: serData
      // },
      graphic: pubGraphic(data),
      series: [
        {
          type: 'pie',
          radius: ['0%', '65%'],
          avoidLabelOverlap: false,
          startAngle: 180,
          label: {
            fontSize: 14,
            lineHeight: 20,
            show: config.series.label.show,
            formatter: (params: any) => {
              return `${params.name} ${
                config.series.label.style.number
                  ? params.value[dimensions[1]]
                  : ''
              }\n${
                config.series.label.style.percent ? params.percent + '%' : ''
              }`;
            },
          },
          emphasis: {
            label: {
              show: config.series.label.show,
              fontSize: 16,
            },
          },
          labelLine: {
            show: true,
          },
          data: serData,
        },
      ],
    };
    return option;
  },
  // 雷达图
  radar: (
    config: any,
    data: any,
    radarIndicator: Record<string, string | number>[],
  ) => {
    console.log(radarIndicator);
    let serData: any = [];
    data?.map(function (item: any) {
      serData.push({
        name: item.name,
        symbolSize: 4,
        areaStyle: {
          opacity: config.series.radarAreaStyle === 'area' ? 0.5 : 0,
        },
        value: item.value,
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
      },
      radar: {
        // shape: 'circle',
        radius: '60%',
        indicator: radarIndicator,
      },
      series: {
        type: 'radar',
        data: serData,
      },
    };
    return option;
  },
  // 词云
  wordCloud: (config: any, data: any, dimensions: any) => {
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
      },
      series: [
        {
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '70%',
          height: '80%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 8,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            color: function () {
              // Random color
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(',') +
                ')'
              );
            },
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
          data: data,
        },
      ],
    };
    return option;
  },
  //水球图
  liquidFill: (config: any, data: any, dimensions: any) => {
    const option = {
      backgroundColor: pubBackground(config.backgroundColor),
      series: [
        {
          type: 'liquidFill', //配置echarts图类型
          radius: '75%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
          data: [data, data], //设置波浪的值
          // waveAnimation:false, //静止的波浪
          backgroundStyle: {
            borderWidth: 1,
            color: '#fff', //水球图内部背景色
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 2,
              borderColor: colors.value[0],
            },
          },
          color: colors.value,
          label: Object.assign(cloneDeep(pubLabel), config.series.label, {
            position: 'inside',
            fontSize: 26,
          }),
        },
      ],
    };
    return option;
  },
  // 极坐标柱状图
  jadeAxis: (config: any, data: any, dimensions: string[]) => {
    // 数据转换
    let transformedData = data?.map(function (item: any) {
      return {
        name: item.product,
        value: dimensions.map(function (dimension: any) {
          return item[dimension];
        }),
      };
    });
    let seriesData: any = [];
    dimensions.slice(1).map((name: string) => {
      seriesData.push({
        name: name,
        type: 'bar',
        label: Object.assign(pubLabel, config.series.label),
        barMaxWidth: 25,
        coordinateSystem: 'polar',
        roundCap: true,
        showBackground: true,
        data: data?.map((res: any) => {
          return res[name];
        }),
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataset: {
        source: transformedData,
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      // xAxis: Object.assign(pubXAxis, config.xAxis),
      // yAxis: Object.assign(pubYAxis, pickBy(config.yAxis, (value) => value !== '')),
      angleAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
        },
        axisLabel: {
          show: true,
        },
      },
      radiusAxis: {
        type: 'category',
        data: data?.map((res: any) => res.product),
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 0,
        },
      },
      polar: {
        center: ['50%', '50%'],
        radius: ['10%', '70%'],
      },
      series: seriesData,
    };
    return option;
  },
  // 箱线图
  boxplot: (config: any, data: any, dimensions: string[]) => {
    let seriesData: any = [];
    dimensions.slice(1).map((item: any) => {
      seriesData.push({
        name: item,
        type: 'boxplot',
        data: data
          ?.map((res: any) => {
            return res[item];
          })
          .map((data: any) => {
            return [data[0], data[1], data[2], data[3], data[4]];
          }),
      });
    });
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      grid: pubGrid(config.legend.position),
      legend: pubLegend(config.legend),
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      graphic: pubGraphic(data),
      dataZoom: Object.assign(pubDataZoom, config.dataZoom),
      xAxis: Object.assign(cloneDeep(pubXAxis), config.xAxis, {
        data: data?.map((res: any) => res.product),
      }),
      yAxis: Object.assign(
        pubYAxis,
        pickBy(config.yAxis, value => value !== ''),
      ),
      series: seriesData,
    };
    return option;
  },
  // 世界地图
  world: (config: any, data: any, dimensions: string) => {
    let nameMap = {
      Afghanistan: '阿富汗',
      Singapore: '新加坡',
      Angola: '安哥拉',
      Albania: '阿尔巴尼亚',
      'United Arab Emirates': '阿联酋',
      Argentina: '阿根廷',
      Armenia: '亚美尼亚',
      'French Southern and Antarctic Lands': '法属南半球和南极领地',
      Australia: '澳大利亚',
      Austria: '奥地利',
      Azerbaijan: '阿塞拜疆',
      Burundi: '布隆迪',
      Belgium: '比利时',
      Benin: '贝宁',
      'Burkina Faso': '布基纳法索',
      Bangladesh: '孟加拉国',
      Bulgaria: '保加利亚',
      'The Bahamas': '巴哈马',
      'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
      Belarus: '白俄罗斯',
      Belize: '伯利兹',
      Bermuda: '百慕大',
      Bolivia: '玻利维亚',
      Brazil: '巴西',
      Brunei: '文莱',
      Bhutan: '不丹',
      Botswana: '博茨瓦纳',
      'Central African Republic': '中非共和国',
      Canada: '加拿大',
      Switzerland: '瑞士',
      Chile: '智利',
      China: '中国',
      'Ivory Coast': '象牙海岸',
      Cameroon: '喀麦隆',
      'Democratic Republic of the Congo': '刚果民主共和国',
      'Republic of the Congo': '刚果共和国',
      Colombia: '哥伦比亚',
      'Costa Rica': '哥斯达黎加',
      Cuba: '古巴',
      'Northern Cyprus': '北塞浦路斯',
      Cyprus: '塞浦路斯',
      'Czech Republic': '捷克共和国',
      Germany: '德国',
      Djibouti: '吉布提',
      Denmark: '丹麦',
      'Dominican Republic': '多明尼加共和国',
      Algeria: '阿尔及利亚',
      Ecuador: '厄瓜多尔',
      Egypt: '埃及',
      Eritrea: '厄立特里亚',
      Spain: '西班牙',
      Estonia: '爱沙尼亚',
      Ethiopia: '埃塞俄比亚',
      Finland: '芬兰',
      Fiji: '斐',
      'Falkland Islands': '福克兰群岛',
      France: '法国',
      Gabon: '加蓬',
      'United Kingdom': '英国',
      Georgia: '格鲁吉亚',
      Ghana: '加纳',
      Guinea: '几内亚',
      Gambia: '冈比亚',
      'Guinea Bissau': '几内亚比绍',
      Greece: '希腊',
      Greenland: '格陵兰',
      Guatemala: '危地马拉',
      'French Guiana': '法属圭亚那',
      Guyana: '圭亚那',
      Honduras: '洪都拉斯',
      Croatia: '克罗地亚',
      Haiti: '海地',
      Hungary: '匈牙利',
      Indonesia: '印度尼西亚',
      India: '印度',
      Ireland: '爱尔兰',
      Iran: '伊朗',
      Iraq: '伊拉克',
      Iceland: '冰岛',
      Israel: '以色列',
      Italy: '意大利',
      Jamaica: '牙买加',
      Jordan: '约旦',
      Japan: '日本',
      Kazakhstan: '哈萨克斯坦',
      Kenya: '肯尼亚',
      Kyrgyzstan: '吉尔吉斯斯坦',
      Cambodia: '柬埔寨',
      Kosovo: '科索沃',
      Kuwait: '科威特',
      Laos: '老挝',
      Lebanon: '黎巴嫩',
      Liberia: '利比里亚',
      Libya: '利比亚',
      'Sri Lanka': '斯里兰卡',
      Lesotho: '莱索托',
      Lithuania: '立陶宛',
      Luxembourg: '卢森堡',
      Latvia: '拉脱维亚',
      Morocco: '摩洛哥',
      Moldova: '摩尔多瓦',
      Madagascar: '马达加斯加',
      Mexico: '墨西哥',
      Macedonia: '马其顿',
      Mali: '马里',
      Myanmar: '缅甸',
      Montenegro: '黑山',
      Mongolia: '蒙古',
      Mozambique: '莫桑比克',
      Mauritania: '毛里塔尼亚',
      Malawi: '马拉维',
      Malaysia: '马来西亚',
      Namibia: '纳米比亚',
      'New Caledonia': '新喀里多尼亚',
      Niger: '尼日尔',
      Nigeria: '尼日利亚',
      Nicaragua: '尼加拉瓜',
      Netherlands: '荷兰',
      Norway: '挪威',
      Nepal: '尼泊尔',
      'New Zealand': '新西兰',
      Oman: '阿曼',
      Pakistan: '巴基斯坦',
      Panama: '巴拿马',
      Peru: '秘鲁',
      Philippines: '菲律宾',
      'Papua New Guinea': '巴布亚新几内亚',
      Poland: '波兰',
      'Puerto Rico': '波多黎各',
      'North Korea': '北朝鲜',
      Portugal: '葡萄牙',
      Paraguay: '巴拉圭',
      Qatar: '卡塔尔',
      Romania: '罗马尼亚',
      Russia: '俄罗斯',
      Rwanda: '卢旺达',
      'Western Sahara': '西撒哈拉',
      'Saudi Arabia': '沙特阿拉伯',
      Sudan: '苏丹',
      'South Sudan': '南苏丹',
      Senegal: '塞内加尔',
      'Solomon Islands': '所罗门群岛',
      'Sierra Leone': '塞拉利昂',
      'El Salvador': '萨尔瓦多',
      Somaliland: '索马里兰',
      Somalia: '索马里',
      'Republic of Serbia': '塞尔维亚',
      Suriname: '苏里南',
      Slovakia: '斯洛伐克',
      Slovenia: '斯洛文尼亚',
      Sweden: '瑞典',
      Swaziland: '斯威士兰',
      Syria: '叙利亚',
      Chad: '乍得',
      Togo: '多哥',
      Thailand: '泰国',
      Tajikistan: '塔吉克斯坦',
      Turkmenistan: '土库曼斯坦',
      'East Timor': '东帝汶',
      'Trinidad and Tobago': '特里尼达和多巴哥',
      Tunisia: '突尼斯',
      Turkey: '土耳其',
      'United Republic of Tanzania': '坦桑尼亚',
      Uganda: '乌干达',
      Ukraine: '乌克兰',
      Uruguay: '乌拉圭',
      'United States': '美国',
      Uzbekistan: '乌兹别克斯坦',
      Venezuela: '委内瑞拉',
      Vietnam: '越南',
      Vanuatu: '瓦努阿图',
      'West Bank': '西岸',
      Yemen: '也门',
      'South Africa': '南非',
      Zambia: '赞比亚',
      Korea: '韩国',
      Tanzania: '坦桑尼亚',
      Zimbabwe: '津巴布韦',
      Congo: '刚果',
      'Central African Rep.': '中非',
      Serbia: '塞尔维亚',
      'Bosnia and Herz.': '波黑',
      'Czech Rep.': '捷克',
      'W. Sahara': '西撒哈拉',
      'Lao PDR': '老挝',
      'Dem.Rep.Korea': '朝鲜',
      'Falkland Is.': '福克兰群岛',
      'Timor-Leste': '东帝汶',
      'Solomon Is.': '所罗门群岛',
      Palestine: '巴勒斯坦',
      'N. Cyprus': '北塞浦路斯',
      Aland: '奥兰群岛',
      'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
      Mauritius: '毛里求斯',
      Comoros: '科摩罗',
      'Eq. Guinea': '赤道几内亚',
      'Guinea-Bissau': '几内亚比绍',
      'Dominican Rep.': '多米尼加',
      'Saint Lucia': '圣卢西亚',
      Dominica: '多米尼克',
      'Antigua and Barb.': '安提瓜和巴布达',
      'U.S. Virgin Is.': '美国原始岛屿',
      Montserrat: '蒙塞拉特',
      Grenada: '格林纳达',
      Barbados: '巴巴多斯',
      Samoa: '萨摩亚',
      Bahamas: '巴哈马',
      'Cayman Is.': '开曼群岛',
      'Faeroe Is.': '法罗群岛',
      'IsIe of Man': '马恩岛',
      Malta: '马耳他共和国',
      Jersey: '泽西',
      'Cape Verde': '佛得角共和国',
      'Turks and Caicos Is.': '特克斯和凯科斯群岛',
      'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
    };
    // 配置项
    const option = {
      color: colors.value,
      backgroundColor: pubBackground(config.backgroundColor),
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        type: 'continuous',
        // min: 0,
        // max: 100,
        left: 'left',
        top: 'bottom',
        itemWidth: 12,
        itemHeight: 130,
        color: [colors.value[0], colors.value[colors.value.length - 1]],
        // text: ['High', 'Low'],
        calculable: true,
      },
      series: [
        {
          name: dimensions,
          type: 'map',
          map: 'world',
          roam: true,
          emphasis: {
            show: true,
          },
          nameMap: nameMap,
          itemStyle: {
            areaColor: colors.value[colors.value.length - 1],
            borderColor: 'rgba(0,0,0,0.1)',
            color: colors.value,
          },
          data: data,
        },
      ],
    };
    return option;
  },
  // 中国地图
  china: (config: any, data: any, dimensions: string) => {
    // 配置项
    const option = {
      backgroundColor: pubBackground(config.backgroundColor),
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        type: 'continuous',
        // min: 0,
        // max: 100,
        left: 'left',
        top: 'bottom',
        itemWidth: 12,
        itemHeight: 130,
        color: [colors.value[0], colors.value[colors.value.length - 1]],
        // text: ['High', 'Low'],
        calculable: true,
      },
      series: [
        {
          name: dimensions,
          type: 'map',
          map: 'china',
          roam: true,
          emphasis: {
            label: {
              show: true,
            },
          },
          itemStyle: {
            areaColor: colors.value[colors.value.length - 1],
            borderColor: 'rgba(0,0,0,0.1)',
            color: colors.value,
          },
          data: data,
        },
      ],
    };
    return option;
  },
};
